<template>
  <div class="debug-container">
    <h1>调试页面</h1>
    <div class="actions">
      <el-button type="primary" @click="refreshLogs">刷新日志</el-button>
      <el-button type="danger" @click="clearLogs">清除日志</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>

    <div class="token-status">
      <h2>当前Token状态</h2>
      <pre>{{ JSON.stringify(tokenStatus, null, 2) }}</pre>
    </div>

    <!-- 添加店铺状态调试区域 -->
    <div class="store-status-debug">
      <h2>店铺状态调试</h2>
      <div style="margin-bottom: 15px">
        <el-input
          v-model="storeId"
          placeholder="店铺ID"
          style="width: 200px; margin-right: 10px"
        ></el-input>
        <el-select
          v-model="storeStatus"
          placeholder="状态"
          style="width: 150px; margin-right: 10px"
        >
          <el-option label="营业中" value="OPEN"></el-option>
          <el-option label="已关闭" value="CLOSED"></el-option>
        </el-select>
        <el-button type="primary" @click="updateStoreStatus" :loading="updating"
          >更新状态</el-button
        >
      </div>
      <div v-if="apiResponse">
        <h3>API响应:</h3>
        <pre>{{ JSON.stringify(apiResponse, null, 2) }}</pre>
      </div>
    </div>

    <div class="logs">
      <h2>调试日志 ({{ logs.length }})</h2>
      <el-table :data="logs" style="width: 100%" v-loading="loading">
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="type" label="类型" width="150" />
        <el-table-column label="消息">
          <template #default="scope">
            <pre class="message">{{ formatMessage(scope.row.message) }}</pre>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getDebugLogs, clearDebugLogs, debugTokenStatus } from "@/utils/auth";
import { ElMessage } from "element-plus";
import { updateStoreStatus as apiUpdateStoreStatus } from "@/api/merchant";

const router = useRouter();
const logs = ref<any[]>([]);
const loading = ref(false);
const tokenStatus = ref<any>(null);

// 店铺状态调试相关
const storeId = ref("");
const storeStatus = ref("OPEN");
const updating = ref(false);
const apiResponse = ref<any>(null);

// 更新店铺状态
const updateStoreStatus = async () => {
  if (!storeId.value) {
    ElMessage.warning("请输入店铺ID");
    return;
  }

  updating.value = true;
  apiResponse.value = null;

  try {
    console.log("调试: 尝试更新店铺状态", {
      storeId: storeId.value,
      status: storeStatus.value,
    });

    // 尝试不同的参数格式
    const response = await apiUpdateStoreStatus(storeId.value, {
      status: storeStatus.value,
      // 以下是可能的替代参数名
      storeStatus: storeStatus.value,
      state: storeStatus.value,
    });

    apiResponse.value = response.data;
    ElMessage.success("状态更新请求已发送");
  } catch (error: any) {
    console.error("更新店铺状态失败", error);
    apiResponse.value = {
      error: error.message,
      response: error.response?.data,
    };
    ElMessage.error("更新失败");
  } finally {
    updating.value = false;
  }
};

// 格式化消息
const formatMessage = (message: string) => {
  try {
    // 尝试解析JSON
    const obj = JSON.parse(message);
    return JSON.stringify(obj, null, 2);
  } catch (e) {
    // 如果不是JSON，直接返回
    return message;
  }
};

// 刷新日志
const refreshLogs = () => {
  loading.value = true;
  try {
    logs.value = getDebugLogs().reverse(); // 最新的日志显示在前面
    tokenStatus.value = debugTokenStatus();
    ElMessage.success("日志已刷新");
  } catch (error) {
    console.error("获取日志失败", error);
    ElMessage.error("获取日志失败");
  } finally {
    loading.value = false;
  }
};

// 清除日志
const clearLogs = () => {
  try {
    clearDebugLogs();
    logs.value = [];
    ElMessage.success("日志已清除");
  } catch (error) {
    console.error("清除日志失败", error);
    ElMessage.error("清除日志失败");
  }
};

// 返回
const goBack = () => {
  router.back();
};

onMounted(() => {
  refreshLogs();
});
</script>

<style scoped>
.debug-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 20px;
}

.actions {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.token-status,
.store-status-debug {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.token-status pre,
.store-status-debug pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.logs {
  margin-top: 20px;
}

.message {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 12px;
}
</style>
